<script setup>
import { message } from "ant-design-vue";
import { nextTick, ref } from "vue";
import { getServer, saveOrUpdateServer } from "@/api/server";

const emit = defineEmits(["finished"]);

const visible = ref(false);
const spinning = ref(true);
const formRef = ref();
const formState = ref({
  id: null,
  userId: 8,
  name: "",
  serverAddr: "",
  serverVersion: "",
  serverState: 1,
  imgShow: "",
  imgFull: [],
  qqGroupId: "",
  javaVersion: "8",
  updateVersion: "",
  serverProfit: "生存服",
  serverType: "公益服",
  vvName: "",
  announcement: "",
  packageUrl: "",
});

const rules = {
  name: [{ required: true, message: "请输入服务器名称", trigger: "blur" }],
  imgShow: [
    { required: true, message: "请输入展示图地址", trigger: "blur" },
    { type: "url", message: "图片URL格式错误", trigger: "blur" },
  ],
  serverAddr: [{ required: true, message: "请输入服务器IP地址", trigger: "blur" }],
  serverVersion: [{ required: true, message: "请输入服务器版本", trigger: "blur" }],
  // new
  qqGroupId: [{ required: true, message: "请输入", trigger: "blur" }],
  javaVersion: [{ required: true, message: "请输入", trigger: "blur" }],
  updateVersion: [{ required: true, message: "请输入", trigger: "blur" }],
  serverProfit: [{ required: true, message: "请输入", trigger: "blur" }],
  serverType: [{ required: true, message: "请输入", trigger: "blur" }],
  vvName: [{ required: true, message: "请输入", trigger: "blur" }],
  announcement: [{ required: true, message: "请输入", trigger: "blur" }],
  packageUrl: [
    { required: true, message: "请输入", trigger: "blur" },
    { type: "url", message: "URL格式错误", trigger: "blur" },
  ],
};

const onSubmit = async () => {
  try {
    await formRef.value.validate();
  } catch {
    return;
  }
  // 展示图
  if (formState.value.imgFull.length != 5) {
    message.error("请添加五张展示图");
    return;
  }
  formState.value.imgFull = formState.value.imgFull.join(",");

  let { data } = await saveOrUpdateServer(formState.value);
  // 重置为数组
  formState.value.imgFull = formState.value.imgFull.split(",");
  if (data.code != 200) {
    message.error(data.message);
    return;
  }
  message.success(data.message);

  emit("finished");
  visible.value = false;
};

const init = async (id) => {
  visible.value = true;
  spinning.value = true;
  formState.value.id = id;
  formState.value.imgFull = [];
  await nextTick();
  formRef.value.resetFields();
  if (id) {
    let { data } = await getServer(id);
    formState.value = data.data;
    formState.value.imgFull = data.data.imgFull.split(",");
  }
  spinning.value = false;
};

const addImg = () => {
  if (formState.value.imgFull.length >= 5) {
    message.info("图片过多,请删减");
    return;
  }
  formState.value.imgFull.push("");
};

defineExpose({
  init,
});
</script>

<template>
  <a-drawer
    :title="formState.id ? '修改服务器' : '新增服务器'"
    placement="right"
    :mask-closable="false"
    :width="720"
    v-model:visible="visible"
  >
    <a-spin :spinning="spinning">
      <a-form ref="formRef" :rules="rules" :model="formState" layout="vertical">
        <a-form-item label="ID" name="id" v-if="formState.id != null">
          <a-input v-model:value="formState.id" disabled />
        </a-form-item>
        <a-form-item label="服务器名称" name="name">
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <a-form-item label="大图">
          <template v-for="(img, index) in formState.imgFull" :key="index">
            <a-input v-model:value="formState.imgFull[index]" />
            <a-button @click="formState.imgFull.splice(index, 1)">删除</a-button>
          </template>
          <br />
          <a-button type="primary" @click="addImg()">增加</a-button>
        </a-form-item>
        <a-form-item label="展示图" name="imgShow">
          <a-input v-model:value="formState.imgShow" />
        </a-form-item>
        <a-form-item label="服务器IP" name="serverAddr">
          <a-input v-model:value="formState.serverAddr" />
        </a-form-item>
        <a-form-item label="服务器版本" name="serverVersion">
          <a-select v-model:value="formState.serverVersion" style="width: 100%">
            <a-select-option value="1.6.4">1.6.4</a-select-option>
            <a-select-option value="1.7.10">1.7.10</a-select-option>
            <a-select-option value="1.8.9">1.8.9</a-select-option>
            <a-select-option value="1.9.4">1.9.4</a-select-option>
            <a-select-option value="1.10.2">1.10.2</a-select-option>
            <a-select-option value="1.11.2">1.11.2</a-select-option>
            <a-select-option value="1.12.2">1.12.2</a-select-option>
            <a-select-option value="1.13.2">1.13.2</a-select-option>
            <a-select-option value="1.14.4">1.14.4</a-select-option>
            <a-select-option value="1.15.2">1.15.2</a-select-option>
            <a-select-option value="1.16.5">1.16.5</a-select-option>
            <a-select-option value="1.17.1">1.17.1</a-select-option>
          </a-select>
        </a-form-item>
        <!-- new -->
        <a-form-item label="qq群号" name="qqGroupId">
          <a-input v-model:value="formState.qqGroupId" />
        </a-form-item>
        <a-form-item label="java版本" name="javaVersion">
          <a-select v-model:value="formState.javaVersion" style="width: 100%">
            <a-select-option value="7">7</a-select-option>
            <a-select-option value="8">8</a-select-option>
            <a-select-option value="16">16</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="更新版本号" name="updateVersion">
          <a-input v-model:value="formState.updateVersion" />
        </a-form-item>
        <a-form-item label="盈利类型" name="serverProfit">
          <a-select v-model:value="formState.serverProfit" style="width: 100%">
            <a-select-option value="公益服">公益服</a-select-option>
            <a-select-option value="商业服">商业服</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="游戏类型" name="serverType">
          <a-select v-model:value="formState.serverType" style="width: 100%">
            <a-select-option value="生存服">生存服</a-select-option>
            <a-select-option value="群组服">群组服</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="vv名称" name="vvName">
          <a-input v-model:value="formState.vvName" />
        </a-form-item>
        <a-form-item label="整合包地址" name="packageUrl">
          <a-input v-model:value="formState.packageUrl" />
        </a-form-item>
        <a-form-item label="公告" name="announcement">
          <a-textarea v-model:value="formState.announcement" :rows="4" />
        </a-form-item>

        <a-form-item>
          <a-space>
            <a-button type="primary" @click="onSubmit">提交</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-drawer>
</template>
